<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goToTest = () => {
  router.push('/pmpu-scale/test')
}
</script>

<template>
  <div class="relative">
    <img src="/src/assets//bg.png"  />
    <div class="absolute top-20 left-32 w-full h-full">
      <div class="text-3xl font-bold text-white">你是手机的主人，还是沦为了手机的“工具人”？</div>
      <div class="mt-4 text-xl font-bold text-white">只需 1 分钟<i class="ml-4 pi pi-clock"></i></div>
      <div class="text-[#d5d0d0] mt-4">即可精准检测你是否存在问题性手机使用行为</div>
      <div class="text-[#d5d0d0] mt-4">不仅如此，你还能掌握主动调整使用习惯的有效方法，逐步改善过度依赖手机的现状</div>
      <div @click="goToTest" class="mt-20 w-[180px] h-[60px] bg-sky-500 flex justify-center items-center rounded-full text-2xl hover:scale-110 transition-all duration-300 cursor-pointer">
        <span class="text-white text-2xl font-bold">进入测验</span><div class="size-8 ml-4 bg-red-300 flex justify-center items-center rounded-md"><i class="text-white pi pi-arrow-right"></i></div> 
      </div>
    </div>
  </div>
  <div class="text-center text-blue-600 font-bold text-2xl my-4">问题性手机使用测试理论</div>
  <div class="mx-[100px] flex flex-col mb-20">
    <div class="indent-8 leading-8">
      问题性手机使用指的是过度且不受控制的，对个人日常生活产生不利影响的手机使用行为。近年来研究表明，问题性手机使用（Problematic Mobile Phone Use, PMPU）会对个体的身心健康产生多方面的负面影响。在生理层面，PMPU可能导致视力模糊（Chu et al., 2023）和睡眠质量下降（Rathakrishnan et al., 2021）；在心理层面，它与情绪调节能力减弱和注意力分散相关；在社交层面，PMPU会降低社交技能和同理心（Scott et al., 2017）；在认知层面，则可能损害记忆力和执行功能（Muhammed & Taha, 2024）。这些发现凸显了科学评估PMPU的必要性，也为开发针对性干预措施提供了依据。
    </div>
    <div class="indent-8 leading-8">有研究发现，PMPU全球整体流行率为28.3%，远高于其他类型的问题性行为,而且呈现出随年代上升的趋势。这一高流行率表明，全世界的人们正面临着严重的手机使用风险。</div>
    <div class="indent-8 leading-8">本平台采用先进的计算机化自适应测验（Computerized Adaptive Testing, CAT）技术，能够根据用户的实时作答情况智能调整题目数量，在保证专业性和准确度的同时大幅缩短测试时间。用户只需花费1-2分钟完成测试，即可获得一份科学、详尽的个性化评估报告。该报告不仅会清晰呈现您的问题性手机使用程度，还会基于测试结果提供针对性的改善建议，帮助您更好地管理手机使用习惯，提升生活质量。</div>
  </div>
</template>
